
<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

  var geocoder;

  var map;

  function initialize() {

    geocoder = new google.maps.Geocoder();

    var latlng = new google.maps.LatLng(-34.397, 150.644);

    var myOptions = {

      zoom: 8,

      center: latlng,

      mapTypeId: google.maps.MapTypeId.ROADMAP

    }

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    codeAddress();

  }

/*

results[]: {   

types[]: string,   

formatted_address: string,   

address_components[]: 

  {     

  short_name: string,     

  long_name: string,     

  types[]: string   

  },   

geometry: 

  {     

  location: LatLng,     

  location_type: GeocoderLocationType     

  viewport: LatLngBounds,     

  bounds: LatLngBounds   

  }  

}

*/



  function codeAddress() {

    var address = document.getElementById("address").value;

    geocoder.geocode( { 'address': address}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {

        map.setCenter(results[0].geometry.location);

        map.fitBounds(results[0].geometry.viewport);

        document.getElementById('bounds_area').innerHTML="bounds:"+results[0].geometry.viewport;
        document.getElementById('location_area').innerHTML="Lat/Long:"+results[0].geometry.location;

        var marker = new google.maps.Marker({

            map: map, 

            position: results[0].geometry.location

        });

      } else {

        alert("Geocode was not successful for the following reason: " + status);

      }

    });

  }

</script>

</head>

<body onload="initialize()">
  <div>
    <input id="address" type="textbox" value="Harrison Township" size="40">
    <input type="button" value="Geocode" onclick="codeAddress()">
  </div>
<div id="map_canvas" style="height:50%"></div>
<div id="bounds_area"></div>
<div id="location_area"></div>
</body>
</html>
